<template>


  <el-menu style="width:200px; min-height: calc(100vh - 41px);overflow: hidden"

           active-text-color="#ffd04b"
           background-color="#545c64"
           class="el-menu-vertical-demo"
           :default-active="this.$route.path"

           text-color="#fff"
            router
  >         <!--我们可以通过给导航栏添加一个router属性，
                表示按照index的值，进行路由跳转-->

            <!--使用这个组件时，如果我们进行页面刷新，那么我们的默认高亮，就会出现混乱
                我们可以通过路由，获取到当前的路由路径，将路由路径附给 default-active属性
                这个属性就是用来指定默认高亮的属性，当我们将当前路由的路径，附给这个属性时，就可以解决
                刷新高亮混乱问题-->
    <el-sub-menu index="1" >
      <template #title>

        <el-icon>
          <icon-menu/>
        </el-icon>
        <span>系统管理</span>
      </template>
      <el-menu-item index="/home">&nbsp;&nbsp;用户管理</el-menu-item>
      <el-menu-item index="/book">&nbsp;&nbsp;发布文章</el-menu-item>

    </el-sub-menu>




    <el-menu-item index="2">

      <el-icon>
        <Document/>
      </el-icon>
      <span>功能模块</span>
    </el-menu-item>



    <el-sub-menu index="4" >
      <template #title>

        <el-icon>
          <setting/>
        </el-icon>
        <span>系统设置</span>
      </template>
      <el-menu-item index="1-1">&nbsp;&nbsp;修改密码</el-menu-item>
      <el-menu-item index="1-2">&nbsp;&nbsp;联系作者</el-menu-item>

    </el-sub-menu>
  </el-menu>
</template>

<script>
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
} from '@element-plus/icons'

export default {
  name: "Aside",
  methods: {
    // @open="handleOpen"
    // @close="handleClose"
  },
  components: {
    Location,
    Document,
    Setting,
    IconMenu,
  }
}
</script>

<style scoped>

</style>